﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="../knockout-3.0.0.js"></script>
</head>
<body>   
    <p>Mouse over the button below:</p>
    <button data-bind="event: { mouseover: go, mouseout: stop }">Gas pedal</button>
    <h1 data-bind="style: { color: lightColor }, text: lightValue"></h1>

    <script>
        var model = {
            lightColor: ko.observable(),
            lightValue: ko.observable(),
            go: function () {
                this.lightColor("green");
                this.lightValue("GO!");
            },
            stop: function () {
                this.lightColor("red");
                this.lightValue("STOP!");
            }
        };
        ko.applyBindings(model);
    </script>
</body>
</html>